<template>
    <div class="component">
        <!--面包屑导航-->
        <Breadcrumb :menulist="['首页', '枚举']" @changeSolution="getList" :componentType="componentType"></Breadcrumb>

        <!--table-->
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="tabHeader">
                <p class="tit">枚举列表</p>
                <el-button type="primary" icon="el-icon-plus" @click="openAdd" style="margin-left: auto">添加枚举</el-button>
            </div>

            <el-table stripe :data="list.list" current-row-key="formId" @row-click="clickRow" style="width: 100%">
                <!--<el-table-column label="ID" prop="enumDefineId"></el-table-column>-->
                <el-table-column label="枚举编码" prop="enumDefineCode"></el-table-column>
                <el-table-column label="枚举名称" prop="enumDefineName"></el-table-column>
                <el-table-column label="是否系统" prop="isSystem" :formatter="formatter"></el-table-column>
                <el-table-column label="是否可编辑" prop="isEdit" :formatter="formatter"></el-table-column>
                <el-table-column label="是否可添加" prop="isAdd" :formatter="formatter"></el-table-column>
                <el-table-column label="是否动态" prop="isDynamic" :formatter="formatter"></el-table-column>
                <el-table-column label="动态sql" prop="dynamicSql"></el-table-column>
                <el-table-column label="所属项目" prop="solutionName" v-if="componentType==1"></el-table-column>
                <el-table-column label="所属产品" prop="topSolutionName"></el-table-column>
                <el-table-column label="创建时间" prop="createTime"></el-table-column>
                <el-table-column label="创建用户" prop="createUserName"></el-table-column>
                <el-table-column label="修改时间" prop="modifyTime"></el-table-column>
                <el-table-column label="修改用户" prop="modifyUserName"></el-table-column>
                <el-table-column label="操作" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" @click.stop="openEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-popconfirm title="删除枚举将同时删除其下所有的枚举项，确认要删除选中枚举吗？" @onConfirm="del(scope.row)" style="margin-left: 10px;">
                            <el-button slot="reference" size="mini" type="danger" @click.stop="">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="slot, total, prev, pager, next, jumper"
                    :total="list.total"
                    :current-page.sync="currentPage"
                    :page-size="rows"
                    @current-change="changePage"
            >
                <el-button v-if="list.list.length>0" icon="el-icon-refresh" type="primary" style="margin-right: 10px; background: #409EFF; color:#fff" @click="getList"></el-button>
            </el-pagination>
        </el-card>

        <!--添加表单-->
        <el-drawer
                title="添加Form"
                :show-close="false"
                :with-header="false"
                :before-close="cancelForm"
                :visible.sync="showAddForm"
                direction="rtl"
                ref="drawer"
                :destroy-on-close="true"
        >
            <div class="drawerTitle">{{type === 1 ? '添加枚举' : type === 2 ? '编辑枚举' : '删除枚举'}}</div>
            <div class="add-drawer">
                <el-form :model="form" :rules="rules" ref="ruleForm">
                    <el-form-item :label-width="formLabelWidth" label="删除提示" v-if="type===3">
                        <el-input value="所选删除表单包含部件信息，确认删除将会将所有关联部件/部件项/部件按钮一并删除，确认删除按删除按钮，放弃删除按返回按钮" autocomplete="off" disabled></el-input>
                    </el-form-item>
                    <!--<el-form-item :label-width="formLabelWidth" label="枚举ID" prop="enumDefineName">
                        <el-input v-model="form.enumDefineId" autocomplete="off" :disabled="type === 2 || type === 3"></el-input>
                    </el-form-item>-->
                    <el-form-item :label-width="formLabelWidth" label="枚举编码" prop="enumDefineCode">
                        <el-input v-model="form.enumDefineCode" autocomplete="off" :disabled="type === 2 || type === 3"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="枚举名称" prop="enumDefineName">
                        <el-input v-model="form.enumDefineName" autocomplete="off" :disabled="type === 3"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="动态sql">
                        <el-input v-model="form.dynamicSql" autocomplete="off" :disabled="!form.isDynamic"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="所属项目">
                        <el-input v-model="form.solutionName" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="所属产品">
                        <el-input v-model="form.topSolutionName" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="是否系统">
                        <el-switch v-model="form.isSystem" :disabled="type === 3"></el-switch>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="是否可编辑">
                        <el-switch v-model="form.isEdit" :disabled="type === 3"></el-switch>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="是否添加">
                        <el-switch v-model="form.isAdd" :disabled="type === 3"></el-switch>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="是否动态">
                        <el-switch v-model="form.isDynamic" :disabled="type === 2 || type === 3"></el-switch>
                    </el-form-item>
                </el-form>

                <div class="add-drawer_foot">
                    <el-button @click="cancelForm()">取 消</el-button>
                    <el-button plain icon="el-icon-delete" @click="reset()" v-if="type === 1">清除</el-button>
                    <el-button type="primary" @click="ok('ruleForm')" :loading="addLoading">{{ addLoading ? '提交中 ...' : '确 定' }}</el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>


<script>
    import Breadcrumb from "@/components/Breadcrumb.vue";
    import {request, url} from "@/api/request";

    export default {
        name: "ComponentEnums",
        components: {
            Breadcrumb
        },
        data() {
            return {
                treeData:[],
                treeDefaultProps: {
                    children: 'childs',
                    label: 'label'
                },
                solutionId:'',
                componentID:'',
                list:{
                    list:[],
                },
                currentPage:1,
                rows:10,

                addLoading:false,
                showAddForm:false,
                formLabelWidth: '100px',
                type:1,//1新增 2编辑 3删除
                form:{
                    isSystem:false,
                    isEdit:true,
                    isAdd:true,
                    isDynamic:false,
                },
                rules:{
                    enumDefineCode: [
                        { required: true, message: '必填', trigger: 'change' },
                    ],
                    enumDefineName: [
                        { required: true, message: '必填', trigger: 'change' },
                    ],
                },
                modelsList:[],
                FormDefault:{},
            };
        },
        props: {
            componentType: {
                type: Number,
                default: 1,//1组件，2产品
            },
        },
        created() {

        },
        mounted() {
            // console.log('solutionId', this.$store.state.solution_global?.solutionId);
            if (this.$store.state.solution_global && this.$store.state.solution_global.solutionId) {
                this.solutionId = this.$store.state.solution_global.solutionId;
                this.getList()
            }
            // this.$store.state.solution_global?.solutionId && this.getList(this.$store.state.solution_global?.solutionId);
        },
        methods: {
            getList(solution){
                solution && (this.solutionId = solution.solutionId);
                request(`${url.getEnumsList}/${this.solutionId}`,{
                    data:{
                        currentPage:this.currentPage,
                        rows:this.rows,
                    },
                },res=>{
                    let list = res.data.list;
                    list.map(v=>{
                        v.children = [];
                        v.hasChildren = true;
                    })
                    res.data.list = list;
                    this.list = res.data;
                })
            },
            changePage(e){
                this.currentPage = e;
                this.getFormList();
            },
            cancelForm() {
                this.addLoading = false;
                this.showAddForm = false;
                this.reset();
            },
            //打开添加表单
            openAdd(){
                if (this.$store.state.solution_global) {
                    this.type = 1;
                    this.showAddForm = true;
                    // this.reset();
                    //请求关联主模型和所属组件等
                    // this.getSelectModelsList();
                    this.getDefault();
                    this.$refs.ruleForm.resetFields();
                }
                else{
                    this.$message({
                        message:'请先选择解决方案。',
                        type:'warning',
                    })
                }
            },
            openEdit(index, row){
                console.log('编辑')
                console.log(row)
                this.type = 2;
                this.showAddForm = true;
                this.form = {
                    ...row,
                    isSystem:!!row.isSystem,
                    isEdit:!!row.isEdit,
                    isAdd:!!row.isAdd,
                    isDynamic:!!row.isDynamic,
                }
            },
            openDel(index, row){
                this.type = 3;
                this.showAddForm = true;
                this.form = {
                    ...row,
                    isAuthControll:!!row.isAuthControll,
                    formType:row.formType.code+'',

                }
            },
            getDefault(){
                request(`${url.getEnumsDefault}/${this.solutionId}`,{},res=>{
                    this.form = {
                        ...this.form,
                        ...res.data,
                    };
                })
            },
            ok(formName){
                //
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.addLoading = true;
                        if (this.type === 1) {
                            this.add();
                        }
                        else if(this.type === 2){
                            this.edit();
                        }
                        else if(this.type === 3){
                            this.del();
                        }
                    }
                    else {
                        this.$message({
                            message:'有未完成的必填项！',
                            type:'warning',
                        })
                        return false;
                    }
                });
            },
            add(){
                this.form = this.replaceAllBoolean(this.form);
                request(`${url.saveEnums}`,{
                    method:'POST',
                    // loading:1,
                    data:{
                        ...this.form,
                        solutionId:this.solutionId,
                    },
                },res=>{
                    this.addLoading = false;
                    this.$refs.drawer.closeDrawer();
                    this.reset('ruleForm');
                    this.$notify.success(res.message);
                    this.getList();
                },()=>{
                    this.addLoading = false;
                })
            },
            edit(){
                this.form = this.replaceAllBoolean(this.form);
                request(`${url.saveEnums}/${this.form.enumDefineId}`,{
                    method:'PUT',
                    data:{
                        enumDefineName:this.form.enumDefineName,
                        isSystem:this.form.isSystem,
                        isEdit:this.form.isEdit,
                        isAdd:this.form.isAdd,
                    },
                },res=>{
                    this.addLoading = false;
                    this.$refs.drawer.closeDrawer();
                    this.reset('ruleForm');
                    this.$notify.success(res.message);
                    this.getList();
                },()=>{
                    this.addLoading = false;
                })
            },
            del(row){
                request(`${url.saveEnums}/${row.enumDefineId}`,{
                    method:'delete',
                },res=>{
                    // this.addLoading = false;
                    // this.$refs.drawer.closeDrawer();
                    // this.reset('ruleForm');
                    this.$notify.success(res.message);
                    this.getList();
                },()=>{
                    // this.addLoading = false;
                })
            },
            formatter(row, column, cellValue, index){
                return cellValue ? '是' : '否';
            },
            reset(){
                this.form = {
                    ...this.form,
                    isSystem:false,
                    isEdit:true,
                    isAdd:true,
                    isDynamic:false,
                    enumDefineCode:'',
                    enumDefineName:'',
                    dynamicSql:'',
                }
            },
            clickRow(row){
                console.log(row);
                this.$router.push({path: `enums/EnumsItems?enumDefineId=${row.enumDefineId}`})
            },
        }
    };
</script>

<style scoped>
    .add-drawer{
        padding:20px 20px 20px 15px;
    }
    .add-drawer_foot{
        text-align: center;
    }
    .drawerTitle {
        line-height: 70px;
        font-size: 20px;
        margin-left: 30px;
    }

    .tree {
        margin-left: 30px;

    }
    .tabHeader{
        display: flex;
        align-items: center;
    }
    .tit{
        font-weight: bold;
        font-size: 20px;
        display: inline;
        margin-right: 15px;
    }
    .box-card{
        margin-bottom: 15px;
    }

</style>
